<template>
    <div style="height:100%;position:relative;">
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
            <span class=" iconfont icon-fanhui header_fanhui" @tap="back"></span>
            <!--标题-->
            <h1 class="mui-title">支付方式</h1>
        </header>
        <!-- 支付方式 -->
        <div class="mui-col mui-col-xs-12" style="margin-top:40px;height:100%;" v-show="paymentWay">
            <form class="mui-input-group">
                <div class="mui-input-row mui-radio mui-left" @tap="handlePaymentChoiceWay('alipay')">
                    <label><img class="ali" src="static/img/ali.png" /><span>支付宝</span></label>
                    <input name="radio" value="Item 1" type="radio">
                </div>
                <div class="mui-input-row mui-radio mui-left" style="border-top: 1px solid #f0f0f0!important;" @tap="handlePaymentChoiceWay('wxpay')">
                    <label><img class="wx" src="static/img/wx.png" /><span>微信支付</span></label>
                    <input name="radio" value="Item 2" type="radio">
                </div>
            </form>
        </div>
        <button type="button" class="bt mui-btn mui-btn-primary" v-show="paymentWay" @tap="handlePay(paymentChoiceWay)">确认</button>
        <!-- 支付成功 -->
        <div class="success" v-show="paymentSuccess">
            <div class="text">
                <div class="icon-dui-01">
                </div>
                <div class="successText">
                    支付成功
                </div>
            </div>
            <div class="payment-way">
                 支付方式：{{wayName(paymentChoiceWay)}}支付
            </div>
            <div class="functionButton">、
                <li style="margin-right:10%" @tap="goHome">返回首页
                </li>
                <li style="margin-left:10%" @tap="goOrder">查看订单
                </li>
            </div>
        </div>
        <!-- 支付失败 -->
        <div class="fail" v-show="paymentFail">
            <div class="text">
                <div class="icon-jia"></div>支付失败
            </div>
            <div class="remark">
                *原因可能是您的余额不足，请更换支付方式
            </div>
        </div>
    </div>
</template>
<script>
    import { Checklist } from 'mint-ui'
    import mui from 'static/js/mui'
    import {aliPay, wxPay } from '@/api/payment'
    export default {
        data() {
            return {
                bidingOrderId: null,// 询价去付款
                crowdOrderId: null,//拼单去付款
                orderId:null,//订单去付款
                wxChannel: null,// 微信支付
                aliChannel: null,// 支付宝支付
                channel: null, // 支付通道
                paymentWay: true,
                paymentSuccess: false,
                paymentFail: false,
                paymentLock: false,
                paymentChoiceWay: 'wxpay',
            };
        },
        props: { },
        watch: {},
        methods: {
            getParams() {
                //获取路由参数'
                let routeVal = this.$route.params
                //console.log(routeVal)
                if (JSON.stringify(routeVal) !== "{}") {
                    if (routeVal.crowdOrderId) {
                        this.crowdOrderId = routeVal.crowdOrderId
                        //console.log(this.crowdOrderId)
                    }
                    if (routeVal.bidingOrderId) {
                        this.bidingOrderId = routeVal.bidingOrderId
                        //console.log(this.bidingOrderId)
                    }
                    if (routeVal.orderId) {
                        this.orderId = routeVal.orderId
                        //console.log(this.orderId)
                    }
                }
            },
            goHome() {
                this.$router.push({
                    path: "/home",
                })
            },
            goOrder() {
                if(this.crowdOrderId){
                    this.$router.push({
                        name: "crowdOrder",
                    })
                }
                if(this.bidingOrderId){
                    this.$router.push({
                        name: "biding",
                    })
                }
                if(this.orderId){
                     this.$router.push({
                        name: "orders",
                    })
                }
            },
            back() {
                //console.log(this.orderId)
                if(this.crowdOrderId){
                    this.$router.push({
                        name: "crowdOrder",
                    })
                }
                if(this.bidingOrderId){
                    this.$router.push({
                        name: "biding",
                    })
                }
                if(this.orderId){
                     this.$router.push({
                        name: "orders",
                    })
                }
                /* let that = this;
                mui.confirm("亲，确定要退出支付吗？", "", ["继续支付", "确认离开"], function (e) {
                    if (e.index == 1) { 
                        if(that.crowdOrderId){
                            that.$router.push({
                                name: "crowdOrder",
                            })
                        }
                        if(that.bidingOrderId){
                            that.$router.push({
                                name: "biding",
                            })
                        }
                    } else {
                        //console.log('取消返回')
                    }
                }) */
            },
            handlePaymentChoiceWay(data) {
                this.paymentChoiceWay = data
            },
            // app写法，h5写法需要另做兼容
            handlePay(id) {
                //询价支付失败
                if(this.bidingOrderId){
                    // 从服务器请求支付订单  
                    if (id == null) {
                        return
                    }
                    //支付锁，ajax没有请求成功回调前锁住按钮不让再次触发支付
                    if (this.paymentLock) {
                        return
                    }
                    this.paymentLock = true

                    if (id == 'alipay') {
                        var payChanel = this.aliChannel
                        let that = this
                        aliPay(that.bidingOrderId).then(response => {
                            //这里要自己封装
                            //console.log(response.data)
                            //let data = response.data.replace(/(^\s*)|(\s*$)/g, "")  
                            plus.payment.request(payChanel, response.data, function (result) {
                                //console.log(result)
                                //console.log(JSON.stringify(result));
                                // 关闭支付锁
                                that.paymentLock = false
                                that.paymentWay = !that.paymentWay
                                that.paymentSuccess = !that.paymentSuccess
                            }, function (e) {
                                //console.log(JSON.stringify(e));
                                that.paymentWay = !that.paymentWay
                                that.paymentFail = !that.paymentFail
                            });
                        })
                    } else if (id == 'wxpay') {
                        var payChanel = this.wxChannel
                        let that = this
                        //微信支付api方法
                        wxPay(that.bidingOrderId).then(response => {
                            ////console.log(response)
                            if (response.msg === 'success') {
                                //这里要自己封装
                                plus.payment.request(payChanel, response.data, function (result) {
                                    //console.log(JSON.stringify(result));
                                    // 关闭支付锁
                                    that.paymentLock = false
                                    that.paymentWay = !that.paymentWay
                                    that.paymentSuccess = !that.paymentSuccess
                                }, function (e) {
                                    //console.log(JSON.stringify(e));
                                    that.paymentWay = !that.paymentWay
                                    that.paymentFail = !that.paymentFail
                                });
                            } else {
                                this.paymentWay = !this.paymentWay
                                this.paymentFail = !this.paymentFail
                            }
                        })
                        ////console.log(payChanel)
                    } else {
                        plus.nativeUI.alert("不支持此支付通道！", null, "捐赠");
                        return;
                    }
                }
                //拼单支付失败
                if(this.crowdOrderId){
                    // 从服务器请求支付订单  
                    if (id == null) {
                        return
                    }
                    //支付锁，ajax没有请求成功回调前锁住按钮不让再次触发支付
                    if (this.paymentLock) {
                        return
                    }
                    this.paymentLock = true

                    if (id == 'alipay') {
                        var payChanel = this.aliChannel
                        let that = this
                        aliPay(that.crowdOrderId).then(response => {
                            //这里要自己封装
                            //console.log(response.data)
                            //let data = response.data.replace(/(^\s*)|(\s*$)/g, "")  
                            plus.payment.request(payChanel, response.data, function (result) {
                                //console.log(result)
                                //console.log(JSON.stringify(result));
                                // 关闭支付锁
                                that.paymentLock = false
                                that.paymentWay = !that.paymentWay
                                that.paymentSuccess = !that.paymentSuccess
                            }, function (e) {
                                //console.log(JSON.stringify(e));
                                that.paymentWay = !that.paymentWay
                                that.paymentFail = !that.paymentFail
                            });
                        })
                    } else if (id == 'wxpay') {
                        var payChanel = this.wxChannel
                        let that = this
                        //微信支付api方法
                        wxPay(that.crowdOrderId).then(response => {
                            ////console.log(response)
                            if (response.msg === 'success') {
                                //这里要自己封装
                                plus.payment.request(payChanel, response.data, function (result) {
                                    //console.log(JSON.stringify(result));
                                    // 关闭支付锁
                                    that.paymentLock = false
                                    that.paymentWay = !that.paymentWay
                                    that.paymentSuccess = !that.paymentSuccess
                                }, function (e) {
                                    //console.log(JSON.stringify(e));
                                    that.paymentWay = !that.paymentWay
                                    that.paymentFail = !that.paymentFail
                                });
                            } else {
                                this.paymentWay = !this.paymentWay
                                this.paymentFail = !this.paymentFail
                            }
                        })
                        ////console.log(payChanel)
                    } else {
                        plus.nativeUI.alert("不支持此支付通道！", null, "捐赠");
                        return;
                    }
                }
                //拼单支付失败
                if(this.orderId){
                    // 从服务器请求支付订单  
                    if (id == null) {
                        return
                    }
                    //支付锁，ajax没有请求成功回调前锁住按钮不让再次触发支付
                    if (this.paymentLock) {
                        return
                    }
                    this.paymentLock = true

                    if (id == 'alipay') {
                        var payChanel = this.aliChannel
                        let that = this
                        aliPay(that.orderId).then(response => {
                            //这里要自己封装
                            //console.log(response.data)
                            //let data = response.data.replace(/(^\s*)|(\s*$)/g, "")  
                            plus.payment.request(payChanel, response.data, function (result) {
                                //console.log(result)
                                //console.log(JSON.stringify(result));
                                // 关闭支付锁
                                that.paymentLock = false
                                that.paymentWay = !that.paymentWay
                                that.paymentSuccess = !that.paymentSuccess
                            }, function (e) {
                                //console.log(JSON.stringify(e));
                                that.paymentWay = !that.paymentWay
                                that.paymentFail = !that.paymentFail
                            });
                        })
                    } else if (id == 'wxpay') {
                        var payChanel = this.wxChannel
                        let that = this
                        //微信支付api方法
                        wxPay(that.orderId).then(response => {
                            ////console.log(response)
                            if (response.msg === 'success') {
                                //这里要自己封装
                                plus.payment.request(payChanel, response.data, function (result) {
                                    //console.log(JSON.stringify(result));
                                    // 关闭支付锁
                                    that.paymentLock = false
                                    that.paymentWay = !that.paymentWay
                                    that.paymentSuccess = !that.paymentSuccess
                                }, function (e) {
                                    //console.log(JSON.stringify(e));
                                    that.paymentWay = !that.paymentWay
                                    that.paymentFail = !that.paymentFail
                                });
                            } else {
                                this.paymentWay = !this.paymentWay
                                this.paymentFail = !this.paymentFail
                            }
                        })
                        ////console.log(payChanel)
                    } else {
                        plus.nativeUI.alert("不支持此支付通道！", null, "捐赠");
                        return;
                    }
                }
            },
            wayName(ChoiceWay){
            if(ChoiceWay == 'wxpay'){
                return '微信'
            }
            if(ChoiceWay == 'alipay'){
                return '支付宝'
            }
            }
        },
        components: { Checklist },
        filters: {},
        computed: {},
        created() {
            // 路由接参数
            this.getParams()
        },
        mounted() {
            mui.init()
            if (window.plus) {
                // 获取支付通道
                let that = this
                plus.payment.getChannels(function (channels) {
                    for (var i in channels) {
                        if (channels[i].id == "wxpay") {
                            that.wxChannel = channels[i]
                        } else {
                            that.aliChannel = channels[i]
                        }
                    }
                }, function (e) {
                    alert("获取支付通道失败:" + e.message)
                })
            }
        }
    };

</script>
<style scoped>
    html,
    body {
        height: 100%;
    }

    .bt {
        position: absolute;
        bottom: 60px;
        left: 5%;
        width: 90%;
        height: 40px;
    }

    .mui-btn-primary:active {
        background-color: #ff6a27;
        border: 1px solid #ff6a27;
    }

    .mui-input-row {
        height: 50px;
        line-height: 50px;
    }

    .mui-radio input[type=radio] {
        position: absolute;
        top: 4px;
        right: 20px;
        display: inline-block;
        width: 28px;
        height: 26px;
        border: 0;
        outline: 0!important;
        background-color: transparent;
        -webkit-appearance: none;
    }

    .mui-radio input[type=radio] {
        position: absolute;
        top: 4px;
        right: 20px;
        display: inline-block;
        width: 28px;
        height: 26px;
        border: 0;
        outline: 0!important;
        background-color: transparent;
        -webkit-appearance: none;
        margin-top: 7px;
    }

    .mui-radio input[type='radio']:before {
        font-family: Muiicons;
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
        text-decoration: none;
        color: #aaa;
        border-radius: 0;
        background: none;
        -webkit-font-smoothing: antialiased;
    }

    .mui-radio input[type='radio']:checked:before {
        content: '\e442';
    }

    .mui-radio input[type='radio']:checked:before {
        color: #ff6a27;
    }

    .mui-radio input[type='radio']:before {
        font-family: Muiicons;
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
        text-decoration: none;
        color: #aaa;
        border-radius: 0;
        background: none;
        -webkit-font-smoothing: antialiased;
    }

    .mui-input-group:before {
        background-color: transparent;
    }

    .mui-input-group .mui-input-row:after {
        background-color: transparent;
    }

    .mui-input-group:after {
        background-color: transparent;
    }

    .mui-input-row label {
        padding: 17px 15px;
        padding-left: 58px;
    }

    .mui-input-row span {
        position: relative;
        top: 2px;
        margin-left: 45px;
    }

    .ali {
        height: 35px;
        position: absolute;
        margin-top: -9px;
    }

    .wx {
        height: 35px;
        position: absolute;
        margin-top: -8px;
    }
    /* 头部 */

    header {
        background: #fff!important;
    }

    .header_fanhui {
        height: 43px;
        line-height: 43px;
        font-size: 18px;
        color: #666666;
    }

    .mui-bar-nav {
        box-shadow: 0 0px 0px;
        border-bottom: 1px solid #e9e9e9;
    }

    .mui-input-row label {
        font-size: 13px;
    }
    /* 成功样式 */

    .success {
        height: 30%;
        background: #fff!important;
        margin-top: 44px;
    }

    .success .text {
        padding-top: 30px;
        color: #ff6a27;
        text-align: center;
        font-size: 22px;
    }

    .success .payment-way {
        padding-top: 26px;
        text-align: center;
        font-size: 16px;
    }

    .success .functionButton {
        padding-top: 26px;
        text-align: center;
        margin-left: 24%;
    }

    .success .functionButton li {
        float: left;
        width: 25%;
        height: 30px;
        line-height: 30px;
        border: 1px solid #999999;
        color: #333333;
    }

    li {
        list-style: none;
    }

    .icon-dui-01 {
        font-size: 23px;
        display: inline-block;
        position: relative;
        top: 1px;
    }

    .successText {
        display: inline-block;
    }
    /* 失败样式 */

    .fail {
        height: 30%;
        background: #fff!important;
        margin-top: 44px;
    }

    .fail .text {
        padding-top: 30px;
        color: #ff6a27;
        text-align: center;
        font-size: 22px;
    }

    .fail .remark {
        padding-top: 26px;
        text-align: center;
    }

    .icon-jia {
        transform: rotate(45deg);
        display: inline-block;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }
</style>